<template>
	<div class="list">
		<van-swipe-cell :disabled="!isdisabled">
			<!-- 删除滑块 -->
		  <template #right>
		    <van-button square type="danger" @click="remove(data)">
					<van-icon name="delete-o"  size="20" />
				</van-button>
		  </template>
			<van-cell border >
				<div class="card-box">
					<van-checkbox 
						v-model="data.done" 
						class="check"
						@click="checked"
					 />
					<div class="info">
						<p>{{data.title}}</p>
						<div class="order">
							<span v-if="data.type === 0">任务</span>
							<span v-else-if="data.type === 1">工作</span>
							<span v-else>其他</span>
							<van-icon name="edit" size="20" color="#c8c9cc" @click="edit(data)" />
						</div>
					</div>
					<div class="collection">
						<van-icon 
							:name="data.collection ? 'star' : 'star-o'"  
							size="20" :color="data.collection ? '#fdfd85' : '#c8c9cc'" 
							@click="collection(data)"
						/>
					</div>
				</div>
			</van-cell>
		</van-swipe-cell>
	</div>
</template>

<script>
	export default {
		methods: {
			collection(item) {
				this.$emit('collection',item)
			},
			checked() {
				this.$emit('checked')
			},
			edit(item) {
				this.$emit('edit',item)
			},
			remove(item) {
				this.$emit('remove',item)
			}
		},
		props: {
			data: {
				type: Object,
				default() {
					return {}
				}
			},
			isdisabled: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		margin: 10px 12px;
		.card-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.van-checkbox{
				margin-right: 10px;
				flex-shrink: 0;
			}
			.info{
				width: 250px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				p{
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.order {
					display: flex;
					align-items: center;
					justify-content: space-between;
					span {
						font-size: 12px;
						color: #999;
					}
				}
				
			}
			.collection{
				margin-left: 10px;
				width: 20px;
				height: 20px;
				flex-shrink: 0;
			}
		}
		/deep/ .van-swipe-cell__right{
			.van-button{
				height: 100%;
			}
		}
	}
</style>